{extend name="admin@public/base" /}
{block name="styles"}
<link rel="stylesheet" href="__PUBLIC__/bootstrap-select/css/bootstrap-select.min.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/css/validationEngine.jquery.css">
<script type="text/javascript" src="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/js/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/js/jquery.validationEngine.min.js"></script>
{/block}
{block name="main-content"}
<div class="page-content">
    <div class="page-header">
        <h1>
            您当前操作
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                添加动态
            </small>
        </h1>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <form class="form-horizontal ajaxForm" method="post" action="{:url('admin/Store/doAdd')}">
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="name"> <span class="red">*</span>名称：</label>
                    <div class="col-sm-10">
                        <input type="text" name="name" id="name" placeholder="请输入名称" class="col-xs-10 col-sm-5 validate[required]"/>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group" style="margin:0 0 20px 180px">
                    <span class="red">*</span>
                    <a url="{:url('Upload/index',array('type'=>'schedule'))}" class="action-buttons upload" style="color:black">
                        <i class="ace-icon fa fa-upload bigger-110">上传图片: </i>
                    </a>
                    <div style="margin:-20px 0 0 100px">
                        <ul class="ace-thumbnails clearfix" id="getpicture">

                        </ul>
                    </div>
                </div>
                <input type="hidden" name="picture" value="">
                <div class="space-4"></div>

                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-info" type="submit">
                            <i class="ace-icon fa fa-check bigger-110"></i>
                            保存
                        </button>
                        &nbsp; &nbsp; &nbsp;
                        <button class="btn" type="reset">
                            <i class="ace-icon fa fa-undo bigger-110"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}
{block name="scripts"}
<script src="__PUBLIC__/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="__PUBLIC__/assets/js/jquery.colorbox.min.js"></script>

<!-- ace scripts -->
<script src="__PUBLIC__/assets/js/ace-elements.min.js"></script>
<script>
    $('.form-horizontal').validationEngine('attach',{
            promptPosition: 'bottomLeft',
            addPromptClass: 'formError-white',
            showOneMessage: true
        });
    //pre-show a file name, for example a previously selected file
    //$('#id-input-file-1').ace_file_input('show_file_list', ['myfile.txt'])

    //删除图片
    function del(va){
        urls = $('.pic_'+va).attr('url');
        $('.pic_'+va).remove();
        val = $("input[name='picture']").val();
        vals = val.split(",");
        vals.splice($.inArray(urls,vals),1);
        $("input[name='picture']").val(vals);
    }

    //上传
    $('.upload').on('click',function(){
        if($("input[name='picture']").val()){
            layer.alert('已经添加过图片', {
                icon: 5
            });
            return;
        }

        var url = $(this).attr('url');
        var index = layer.open({
            type: 2,
            title: '上传图片',
            content: url,
            area: ['50%', '420px'],
            cancel: function(index, layero){
                // location.reload();
                var data = $(layero).find("iframe")[0].contentWindow.picture;

                if(data){
                    for(var i=0;i<data.length;i++){
                        num = Math.floor(Math.random()*999+1);
                        var img = '<li class="pic_'+num+'" url="'+data[i]+'">' +
                            '<a href="__PUBLIC__/uploads/'+data[i]+'" data-rel="colorbox">' +
                            '<img src=__PUBLIC__/uploads/'+data[i]+' width="100" height="100">' +
                            '</a>' +
                            '<div class="tools" style="height:25px">' +
                            '<a href="javascript:void(0)" onclick="del('+num+')">' +
                            '<i class="ace-icon fa fa-times red"></i>' +
                            '</a>' +
                            '</div>' +
                            '</li>';
                        $("#getpicture").append(img);

                        //点击图片放大效果
                        jQuery(function($) {
                            var $overflow = '';
                            var colorbox_params = {
                                rel: 'colorbox',
                                reposition:true,
                                scalePhotos:false,
                                scrolling:true,
                                previous:'<i class="ace-icon fa fa-arrow-left"></i>',
                                next:'<i class="ace-icon fa fa-arrow-right"></i>',
                                close:'&times;',
                                current:'{current} of {total}',
                                maxWidth:'80%',
                                maxHeight:'80%',
                                onOpen:function(){

                                },
                                onClosed:function(){
                                    document.body.style.overflow = $overflow;
                                },
                                onComplete:function(){
                                    $.colorbox.resize();
                                }
                            };

                            $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
                            $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon


                            $(document).one('ajaxloadstart.page', function(e) {
                                $('#colorbox, #cboxOverlay').remove();
                            });
                        })
                    }
                    // 把图片地址数组放入隐藏域中
                    pic = $("input[name='picture']").val();
                    if(pic){
                        $("input[name='picture']").val(data + ',' + pic);
                    }else{
                        $("input[name='picture']").val(data);
                    }

                }
            }
        });
    });

</script>
{/block}